<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        {{name}}

        <button @click="changeName">修改 name</button>
    </div>
</body>
<script>

    // ref：让基本数据类型具备响应式，也可以让引用类型具备响应式
    const { ref } = Vue

    const app = Vue.createApp({
        setup (props, context) {

            // 通过 proxy 代理帮我们实现数据的响应式
            // 会将   '张一'  ->   proxy({value: '张一'})
            let name = ref('张一')

            function changeName () {
                // 修改通过 ref 创建的数据时需要加一个 .value 属性才可以
                name.value = '张三'
            }

            // 这里一定要将需要使用的状态 return 出去
            return {
                name,
                changeName
            }
        },
    })
    app.mount('#app')
</script>

</html>